<template>
   <!-- 筛选区 -->
   <div class="sub-filter">
     <div class="item">
       <div class="head">品牌：</div>
       <div class="body">
         <a href="javascript:;"
          v-for="brand in subCate.brands"
          :key="brand.id"
          @click="selectBrand(brand)"
          :class="{active:brand.selected}"
          >{{brand.name}}</a>
       </div>
     </div>

     <div class="item" v-for="sale in subCate.saleProperties" :key="sale.id">
       <div class="head">{{sale.name}}：</div>
       <div class="body">
         <a href="javascript:;"
          v-for="prop in sale.properties"
         @click="selectAttr(prop, sale)"
         :class="{active:prop.selected}"
          :key="prop.id">{{prop.name}}</a>
       </div>
     </div>
   </div>
</template>
<script>
export default {
  name: 'SubFilter',
  props: { subCate: { type: Object, default: () => ({}) } },
  setup (props, { emit }) {
    const getFilter = () => {
      // 收集目前的参数
      const params = {
        brandId: null,
        attrs: []
      }
      // 更新brandId
      // 找出selected为true的那一项
      const brand = props.subCate.brands.find(it => it.selected)
      params.brandId = brand ? brand.id : null
      // 更新attrs
      props.subCate.saleProperties.forEach(item => {
        const groupName = item.name
        const propertyName = item.properties.find(it => it.selected).name
        if (propertyName !== '全部') {
          params.attrs.push({ groupName, propertyName })
        }
      })
      return params
    }
    const selectBrand = (brand) => {
      // 1. 更新品牌数据
      console.log(brand)
      props.subCate.brands.forEach(it => { it.selected = false })
      brand.selected = true
      // 2. 收集目前的参数,通知父组件
      emit('filter-change', getFilter())
    }

    const selectAttr = (prop, sale) => {
      // 1. 更新品牌数据
      console.log(prop, sale)
      sale.properties.forEach(it => { it.selected = false })
      prop.selected = true
      // 2. 收集目前的参数,通知父组件
      emit('filter-change', getFilter())
    }

    return { selectBrand, selectAttr }
  }
}
</script>
<style scoped lang='less'>
  // 筛选区
  .sub-filter {
    background: #fff;
    padding: 25px;
    .item {
      display: flex;
      line-height: 40px;
      .head {
        width: 80px;
        color: #999;
      }
      .body {
        flex: 1;
        a {
          margin-right: 36px;
          transition: all .3s;
          display: inline-block;
          &.active,
          &:hover {
            color: @xtxColor;
          }
        }
      }
    }
  }
</style>
